<template>
    <div class="w-90 h-15 d-flex align-items-c justify-content-b">
        <div class="w-100 h-60 d-flex align-items-s justify-content-b">
            <div class="d-flex align-items-s flex-direction-c flex-gap-16">
                <div class="roomID font-size-26">房间号：{{roomID}}</div>
                <div class="w-100 font-size-v-10">回合数：{{round}}</div>
            </div>
            <div class="d-flex align-items-c justify-content-c flex-gap-16">
                <div class="w-100 h-40 d-flex align-items-e justify-content-c">
                    <div v-show="identity">
                        <div v-show="!isStartGame && !isGameOver">
                            <el-button type="success" @click="startGame">开始游戏</el-button>
                        </div>
                        <div v-show="!isStartGame && isGameOver">
                            <el-button type="success" @click="startGame">再来一局</el-button>
                        </div>
                    </div>
                </div>
                <div class="w-100 d-flex align-items-c justify-content-c">
                    <div v-if="!isStartGame" class="w-100 d-flex align-items-e justify-content-sa">
                        <img src="@/assets/image/white.png" class="chess" alt="白棋" @click="chooseChess(1)" />
                        <img src="@/assets/image/black.png" class="chess" alt="黑棋" @click="chooseChess(2)" />
                    </div>
                    <div v-else class="w-100 d-flex align-items-e justify-content-sa">
                        <div v-show="this.isMyTurn && isStartGame">
                            <div class="d-flex align-items-c justify-content-c flex-gap-6" v-show="myselfChess === 1">
                                <img src="@/assets/image/white.png" alt="白棋" />等待白棋落子
                            </div>
                            <div class="d-flex align-items-c justify-content-c flex-gap-6" v-show="myselfChess === 2">
                                <img src="@/assets/image/black.png" alt="黑棋" />等待黑棋落子
                            </div>
                        </div>
                        <div v-show="!this.isMyTurn && isStartGame">
                            <div class="d-flex align-items-c justify-content-c flex-gap-6" v-show="himselfChess === 1">
                                <img src="@/assets/image/white.png" class="chess" alt="白棋" />等待白棋落子
                            </div>
                            <div class="d-flex align-items-c justify-content-c flex-gap-6" v-show="himselfChess === 2" >
                                <img src="@/assets/image/black.png" class="chess" alt="黑棋" />等待黑棋落子
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex align-items-c justify-content-e"><el-button type="danger" @click="closeRoom(true)">退出房间</el-button></div>
        </div>
    </div>
</template>

<script>
import {ElButton} from "element-plus";
import {defineComponent} from "vue";

export default defineComponent({
    data(){
        return {
            round: 0,       //回合数
            isGameOver: false,      //游戏是否结束
            isStartGame: false,     //是否开始游戏
            isMyTurn: false,    //是否为我的回合
            myselfChess: 0,     //我的棋子颜色
            himselfChess: 0,    //对方的棋子颜色
        }
    },
    props: {
        roomID: {      //房间编号
            type: String,
            default: 0
        },
        identity: {    //是否为房主
            type: Boolean,
            default: false
        },
        isGameOvers: {
            type: Boolean,
            default: false
        },
        isStartGames: {
            type: Boolean,
            default: false
        },
        isMyTurns: {
            type: Boolean,
            default: false
        },
        myselfChesss: {
            type: Number,
            default: 0
        },
        himselfChesss: {
            type: Number,
            default: 0
        }
    },
    watch: {
        isGameOvers(newVal){      //游戏是否结束
            this.isGameOver = newVal;
        },
        isStartGames(newVal){   //是否开始游戏
            this.isStartGame = newVal;
        },
        isMyTurns(newVal){    //是否为我的回合
            this.isMyTurn = newVal;
        },
        myselfChesss(newVal){     //我的棋子颜色
            this.myselfChess = newVal;
        },
        himselfChesss(newVal){    //对方的棋子颜色
            this.himselfChess = newVal;
        }
    },
    methods: {
        /**
         * 开始游戏
         */
        startGame(){
            this.$emit('startGame');
        },
        /**
         * 选择棋子颜色
         * @param chess
         */
        chooseChess(chess){
            this.$emit('chooseChess', chess);
        },
        /**
         * 关闭房间
         * @param flag
         */
        closeRoom(flag){
            this.$emit('closeRoom', flag);
        }
    },
    components: {
        ElButton,
    }

});
</script>

<style scoped lang="scss">
.chess{
    transition: transform 0.3s ease;  /* 添加过渡效果 */
}
.chess:hover{
    transform: scale(1.5);
}

</style>